#game-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

#game-map {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #4a4a4a;
    z-index: 10;
}

#player {
    position: absolute;
    --frames: calc(var(--img-width) / var(--frame-width)); /* 定义帧数 */
    width: calc(var(--frame-width) * 1px);
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: auto; /* 图片按原始大小显示 */
    animation: idleAnimation calc(0.3s * var(--frames)) infinite steps(var(--frames));
    z-index: 100;
}

@keyframes idleAnimation {
    100% { background-position: calc(-1px * var(--frame-width) * var(--frames)) 0; }
}

.tile {
    position: absolute;
    width:var(--tile-width);
    height:var(--tile-height);
    box-sizing: border-box;
}

.soil {
    background-color: #654321;
}

.stone-base {
    background-color: #8c8c8c;
}

.stone {
    background-color: #6c6c6c;
}

.water-area {
    background-color: #4cbecb;
}

.tree {
    background-color: #00b42f;
}

#ui {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    z-index: 200;
}

#pauseGame {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 200;
}